<template>
    
    <Header></Header>
    <div  class="feed2" @scroll="scrollHandle">
    <div ref="scrollContainer"  class="container" >
        <Carousel :rc_videos="rc_videos"></Carousel>
        <videoCard
         v-for="(video,index) in videos"
         :key="video.vid"  
         :index="index"
        :video="video"></videoCard>
    </div>
    <div class="loader_wrapper">
        <div v-if="isLoading" class="loader"></div>
    </div>
</div>
</template>
<script>
import videoCard from '@/components/videoCard.vue';
import { Transition } from 'vue';
import Header from '@/components/headAndPic.vue';
import HeadOrigin from '@/components/headOrigin.vue';
import Carousel from '@/components/carousel.vue';
window.addEventListener('beforeunload',function(event){
    this.localStorage.removeItem('userToken');
})
export default {
   
    data(){
       return{
        rc_videos:[{
            id:1,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image.png"
        },{
            id:"d7e72278-cbc7-4012-8143-e24f5ed67982",
            title:"这不是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image2.png"
        },{
            id:3,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image3.png"
        },{
            id:4,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image4.png"
        },{
            id:5,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image5.png"
        },{
            id:6,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image6.png"
        },{
            id:7,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image7.png"
        },{
            id:8,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image8.png"
        }],
        videos:[{
            id:1,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image3.png"
        },{
            id:"d7e72278-cbc7-4012-8143-e24f5ed67982",
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image.png"
        },{
            id:3,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image2.png"
        },{
            id:4,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image3.png"
        },{
            id:5,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image3.png"
        },{
            id:6,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image.png"
        },{
            id:7,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image2.png"
        },{
            id:8,
            title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image3.png"
        }],
       
        isLoading: false, // 是否正在加载更多视频  
        hasMoreVideos: true, // 是否有更多视频可以加载  
       }
    },
    components:{
        videoCard,
        Header,
        HeadOrigin,
        Carousel
    },
    mounted() {  
            window.addEventListener('scroll', this.scrollHandle);
        },  
        beforeDestroy() {  
           window.removeEventListener('scroll', this.scrollHandle);  
    }, 
  methods: {  
    scrollHandle() {  
      const bottomOfWindow =  
      window.innerHeight + window.scrollY  + 100 >= document.body.offsetHeight;  
      if (bottomOfWindow && !this.isLoading) {  
        this.loadMore();  
      }  
    }, 
     loadMore() {  
      this.isLoading = true;  
  
      // 模拟API请求  
      setTimeout(() => {  
        const newItems = Array.from({ length: 8 }, (_, index) => ({  
          id: this.videos.length + index + 1,  
          title:"这是一个视频" ,
            uploader:"peind",
            uploadDate:"10-14",
            coverUrl:"/src/assets/image3.png"
        }));  
  
        this.videos = [...this.videos, ...newItems];  
        this.isLoading = false;  
      }, 1000);  
    }
  
}  
}
</script>
<style scoped>
.feed2{
    box-sizing: border-box;
}
.container{
    display: grid;
    position: relative;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: 20px;  
    padding:30px 80px;  
    width: 100%;
    box-sizing: border-box;
}
.loader_wrapper{
    display: flex;
    justify-content: center;
}
.loader {
  width: 120px;
  height: 20px;
  background: 
    linear-gradient(#000 50%,#0000 0),
    linear-gradient(#0000 50%,#000 0),
    linear-gradient(#000 50%,#0000 0),
    linear-gradient(#0000 50%,#000 0),
    linear-gradient(#000 50%,#0000 0),
    linear-gradient(#0000 50%,#000 0)
    #ddd;
  background-size: calc(100%/6 + 1px) 200%;
  background-repeat: no-repeat;
  animation: l12 1s infinite;
}
@keyframes l12 {
  0%     {background-position: calc(0*100%/5) 100%,calc(1*100%/5)   0%,calc(2*100%/5) 100%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  16.67% {background-position: calc(0*100%/5)   0%,calc(1*100%/5)   0%,calc(2*100%/5) 100%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  33.33% {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5) 100%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  50%    {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5)   0%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  66.67% {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5) 100%,calc(4*100%/5) 100%,calc(5*100%/5)   0%}
  83.33% {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5) 100%,calc(4*100%/5)   0%,calc(5*100%/5)   0%}
  100%   {background-position: calc(0*100%/5)   0%,calc(1*100%/5) 100%,calc(2*100%/5)   0%,calc(3*100%/5) 100%,calc(4*100%/5)   0%,calc(5*100%/5) 100%}
}
</style>